export default function initSidebar() {
  const $ = window.jQuery;
  
  const $sidenav = $('.sidenav')
  let $currentActive;
  let currentTargetId;
  
  $('.sidenav-tab:not(.disabled)').hover(function focus(e) {
    const $this = $(this)
    const targetId = $this.data('target');
    if (!currentTargetId || currentTargetId !== targetId) {
      if (currentTargetId) {
        $(currentTargetId).removeClass('show');
        $currentActive.removeClass('active');
      }
      const sidenavOffset = $sidenav.offset();
      const targetTranslate = $this.offset().top - sidenavOffset.top;
      const $target = $(targetId);
      $target
        .css('top', `${targetTranslate}px`)
        .addClass('show');
      $this.addClass('active');
      currentTargetId = targetId;
      $currentActive = $this;
    }
  });
  
  $sidenav.on('mouseleave', function(e) {
    if (currentTargetId) {
      $(currentTargetId).removeClass('show');
      $currentActive.removeClass('active');
      currentTargetId = '';
      $currentActive = null;
    }
  })
}